<template>
<!--  创作中心页面-->
<div class="d1">
  <div class="d2">
    <el-container >
      <el-header class="c1">
        <nav-bar/>
      </el-header>
      <el-container >
        <el-aside class="a1" style="width: 200px">
          <el-row class="tac">
            <el-col :span="19">
              <!--                <h5>默认颜色</h5>-->
              <el-menu
                  style="width: 200px; min-height: calc(100vh - 50px)"
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose" id="l1">
                <el-menu-item index="2">
                  <router-link to="/con" style="text-decoration: none">
                    <el-button style="align-content: center;width: 100px;line-height: 50px" type="primary">投稿</el-button>
                  </router-link>
                </el-menu-item>
                <el-menu-item index="3" style="width: 200px">
                  <router-link to="/mvideo" style="text-align: center"><span style="margin-right: 10px">内容管理</span></router-link>
                </el-menu-item>
                <el-menu-item index="4" style="width: 200px">
                  <router-link to="/DC" style="text-align: center"><span style="margin-right: 10px">数据中心</span></router-link>
                </el-menu-item>
                <el-submenu index="5" style="width: 200px;text-align: center">
                  <template slot="title">互动管理</template>
                  <el-menu-item index="1-4-1" >
                    <router-link to="/BulletAdmin" style="text-decoration: none">弹幕管理</router-link>
                  </el-menu-item>
                  <el-menu-item index="1-4-2" >
                    <router-link to="/CommentAdmin"  style="text-decoration: none">评论管理</router-link>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main class="m1" style="margin: 0px" >
          <router-view/>
        </el-main>
      </el-container>
      <!-- <el-footer>
         底部
       </el-footer> -->
    </el-container>
  </div>
</div>
</template>

<script>
export default {
  name: "writing",
  data(){
    return{

    }
  },created() {
  },methods:{
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<style scoped>
*{
  margin: 0px;
  padding: 0px;
}
.d2{
  width: 100%;
  height: 400px;
}
.c1{
  position: relative;
  background-color: skyblue;
}
.img1{
  width: 160px;
  height: 80%;
}
#l1{
  text-align: center;
  width: 200px;
}
.a1{
}
.m1{
  height: 100%;
}

</style>
